<template>
  <!-- 商品区 -->
  <div class="commodity">
    <div v-for="(item,index) in imglist"
         :key="index"
         class="commodity-bg"
         :class="item.styclass">
      <img :src="item.titleImg"
           class="titleimg">
      <!-- 商品 -->
      <div class="commodity-img">
        <div v-for="(item2,index2) in item.imgUrl"
             :key="item2">
          <img :src="item2.url"
               style="margin-right:9px">
          <div class="aftimg"
               v-if="item.name == '安防设备'"></div>
          <div class="xbutimg"
               @click="watchesClick(item2,item,index2)">商品详情</div>
          <div class="qbutimg"
               @click="grabClick(item2,item,index2)">抢</div>
        </div>
        <img src="@/assets/images/three/YDwz.png"
             class="ydtextimg"
             v-if="item.name == '运动手表'">
      </div>
    </div>
    <div style="height:1px"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'
import loginModel from '@m/onekey-login/index.vue'
// 格式化日期的
import userApi from '@/api/mobile_user/index'
import { Storage } from '@/utils/Storage'
import { MOBILE_TOKEN, MOBILE_USER } from '@/store/mutation-types'
import sbTitle1 from '@/assets/images/three/afTitle.png'
import sbTitle2 from '@/assets/images/three/etTitle.png'
import sbTitle3 from '@/assets/images/three/ydTitle.png'

import afimg1 from '@/assets/images/three/af1.png'
import afimg2 from '@/assets/images/three/af2.png'
import afimg3 from '@/assets/images/three/af3.png'
import afimg4 from '@/assets/images/three/af4.png'
import afimg5 from '@/assets/images/three/af5.png'
import afimg6 from '@/assets/images/three/af6.png'

import etimg1 from '@/assets/images/three/et1.png'
import etimg2 from '@/assets/images/three/et2.png'
import etimg3 from '@/assets/images/three/et3.png'
import etimg4 from '@/assets/images/three/et4.png'
import etimg5 from '@/assets/images/three/et5.png'
import etimg6 from '@/assets/images/three/et6.png'
import etimg7 from '@/assets/images/three/et7.png'

import ydimg1 from '@/assets/images/three/yd1.png'
import ydimg2 from '@/assets/images/three/yd2.png'
import ydimg3 from '@/assets/images/three/yd3.png'
import ydimg4 from '@/assets/images/three/yd4.png'
import ydimg5 from '@/assets/images/three/yd5.png'
import ydimg6 from '@/assets/images/three/yd6.png'
import { Toast, Dialog } from 'vant'

import { useRoute, useRouter } from 'vue-router'
import { recordCilck } from '@/utils/record'

export default defineComponent({
  name: 'Login',
  components: { loginModel },
  setup() {
    const { proxy }: any = getCurrentInstance()
    const route = useRoute()
    const router = useRouter()

    const rouData: any = ref(route.query.name)
    const state: any = reactive({
      num: 10,
      imglist: [],
      afimglist: [
        {
          imgUrl: [
            { url: afimg1, name: '待定字段' },
            { url: afimg2, name: '待定字段' },
            { url: afimg3, name: '待定字段' },
            { url: afimg4, name: '待定字段' },
            { url: afimg5, name: '待定字段' },
            { url: afimg6, name: '待定字段' }
          ],
          titleImg: sbTitle1,
          name: '安防设备',
          styclass: 'commoditybg1'
        }
      ],
      etimglist: [
        {
          imgUrl: [
            { url: etimg1, name: '待定字段' },
            { url: etimg2, name: '待定字段' },
            { url: etimg3, name: '待定字段' },
            { url: etimg4, name: '待定字段' },
            { url: etimg5, name: '待定字段' },
            { url: etimg6, name: '待定字段' },
            { url: etimg7, name: '待定字段' }
          ],
          titleImg: sbTitle2,
          name: '儿童手表',
          styclass: 'commoditybg3'
        }
      ],
      ydimglist: [
        {
          imgUrl: [
            { url: ydimg1, name: '待定字段' },
            { url: ydimg2, name: '待定字段' }
          ],
          titleImg: sbTitle3,
          name: '运动手表',
          styclass: 'commoditybg2'
        }
      ]
    })
    function watchesClick(data, name, index) {
      console.log(data, '手表点击了商品详情')
      if (name.name != '安防设备') {
        router.push({
          name: 'immediatelyTransaction'
        })
      }
      recordCilck('二级-' + name.name + (index + 1) + '商品详情', '-')
      // Webapph5.pushTrack({ eventmsg: '二级-' + name.name + (index + 1) + '商品详情', eventid: '2' })
    }
    function grabClick(data, name, index) {
      console.log(data, '手表点击了qia抢抢', name)
      recordCilck('二级-' + name.name + (index + 1) + '去预约', '-')
      Storage.set('merchandiseNews', data, 30 * 60)
      if (name.name == '安防设备') {
        router.push({
          name: 'appointment'
        })
      } else {
        let numType: any = localStorage.getItem('h5type')
        if (numType == 1) {
          window.location.href = 'https://gd.10086.cn/gmccapp/webpage/serviceHall/index.html'
        } else {
          // 您暂时无法参加本优惠，敬请留意其他优惠活动
          Dialog.alert({
            message: '您暂时无法参加本优惠，敬请留意其他优惠活动'
          }).then(() => {
            // on close
          })
        }
      }
      // Webapph5.pushTrack({ eventmsg: '二级-' + name.name + (index + 1) + '去预约', eventid: '2' })
    }

    // 组件-完
    onMounted(() => {
      console.log(rouData.value, 'ssssssssssddsd')
      if (rouData.value == '儿童手表') {
        state.imglist = state.etimglist
        return
      }
      if (rouData.value == '运动手表') {
        state.imglist = state.ydimglist
        return
      }
      if (rouData.value == '安防设备') {
        state.imglist = state.afimglist
        return
      }
    })

    return {
      ...toRefs(state),
      rouData,
      watchesClick,
      grabClick
    }
  }
})
</script>

<style lang="scss" scoped>
.commodity {
  background: #6b0609;
  // padding-top: 150px;
  width: 100%;
  .commodity-bg {
    width: 350px;
    // height: 250px;
    // margin: -70px auto;
    background-size: 100% 100%;
    background-position: center center;
    .titleimg {
      width: 230px;
      margin-top: -20px;
      margin-left: 60px;
    }
    .commodity-img {
      display: flex;
      flex-wrap: wrap;
      margin-left: 9px;
      z-index: 100;
      img {
        width: 160px;
        margin: 5px 0;
      }
      .ydtextimg {
        width: 325px;
        text-align: center;
      }
      .aftimg {
        position: absolute;
        margin: -22px 0 3px 3px;
        background: #cc1f26;
        width: 40px;
        height: 15px;
        z-index: 200;
      }
      .xbutimg {
        // position: absolute;
        margin: -20px 0 3px 3px;
        background: chartreuse;
        opacity: 0;
        width: 40px;
        height: 15px;
        z-index: 200;
      }
      .qbutimg {
        position: absolute;
        margin: -60px 0px 3px 105px;
        opacity: 0;
        width: 50px;
        height: 50px;
        z-index: 200;
      }
    }
  }
  // 运动
  .commoditybg2 {
    // height: 567px;
    background-image: url(../../assets/images/three/liu.png);
    margin: -215px auto !important;
    z-index: 100 !important;
    padding: 0 0 20px 0;
  }
  // 儿童
  .commoditybg3 {
    // position: absolute;
    height: 737px;
    background-image: url(../../assets/images/three/ba.png);
    margin: 0px auto !important;
    z-index: 100 !important;
  }
  // 安防
  .commoditybg1 {
    // height: 567px;
    background-image: url(../../assets/images/three/liu.png);
    margin: 0px auto !important;
    z-index: 100 !important;
    padding: 0 0 20px 0;
  }
}
</style>
